<!--
 * @Author: chenl
 * @Date: 2023-12-06 09:49:34
 * @LastEditors: chenl
 * @LastEditTime: 2024-03-01 17:28:09
 * @Description: 顶部栏
-->

<template>
  <div class="AHead">
    <div class="AHeadLeft">
      <div class="logo">
        <img src="@/assets/images/common/logo.png" />
      </div>
      <div class="title">土拉宝运营平台</div>
    </div>
    <div class="isMenu" @click="handIsMenu">
      <el-tooltip
        class="item"
        effect="dark"
        :content="isCollapse ? '展开' : '收缩'"
        placement="bottom"
      >
        <i class="el-icon-menu"></i>
      </el-tooltip>
    </div>
    <div class="menuPosition">{{ menuPosition }}</div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {};
  },
  computed: {
    isCollapse() {
      return this.$store.state.state.isCollapse; // 返回$store对象的状态值
    },
    menuPosition() {
      return this.$store.state.state.menuPosition;
    },
  },
  watch: {},
  methods: {
    ...mapActions('state', ['updateisCollapseAsync']),
    handIsMenu() {
      this.updateisCollapseAsync(!this.isCollapse);
    },
  },
  created() {},
  mounted() {},
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
.AHead {
  height: 100%;
  width: calc(100% - 40px);
  display: flex;
  line-height: 60px;
  padding: 0 20px;
  background: #545c64;

  .AHeadLeft {
    display: flex;
    width: 200px;
    .logo {
      width: 40px;
      height: 40px;
      background-color: #fff;
      border-radius: 50%;
      margin-top: 10px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      color: #fff;
      margin-left: 10px;
      font-size: 16px;
    }
  }

  .isMenu {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }

  .menuPosition {
    color: #fff;
    margin-left: 10px;
  }
}
</style>
